<template>
  <view class="content">
    <view class="searchBox">
      <u-calendar :show="show" mode="range" @confirm="confirm" @close="show = false" :allowSameDay="true"
        :minDate="minDate" :closeOnClickOverlay="true" monthNum="13"></u-calendar>
      <view class="timeBox" @click="show = true">
        <span style="margin-right: 10rpx;">日期</span>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.start_date}}
        </view>
        <view style="margin: 0 10rpx;">
          至
        </view>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.end_date}}
        </view>
      </view>
      <view class="iptBox">
        <input class="ipt" type="text" placeholder="输入关键词" placeholder-class="iptPla" v-model="info.search_data">
        <view class="searchBtn" @tap="getUserProgress()">
          搜索
        </view>
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="(i,k) in list" :key="k">
        <view class="header">
          {{i.type_name}}
        </view>
        <view class="boxList flex">
          <view class="box flex" v-for="(j,index) in i.log_data" :key="index">
            <view class="c-ff">
              {{j.grade_type_name}}
            </view>
            <view class="c-66">
              {{j.hour}}小时
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        info: {
          start_date: '',
          end_date: '',
          id: ''
        },
        show: false,
        minDate: '',
        list: []
      };
    },
    onLoad(option) {
      this.info.id = option.id
      this.chooseTimed()
      this.getDate()
      this.getUserProgress()
    },
    methods: {
      // 设置默认日期，最大值为今天，最小值为去年今天
      chooseTimed() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month <= 9) {
          month = '0' + month;
        }
        if (day <= 9) {
          day = '0' + day;
        }
        let minyear = year - 1;
        this.minDate = minyear + '-' + month + '-' + day;
        this.maxDate = year + '-' + month + '-' + day;
      },
      confirm(e) {
        this.info.start_date = e[0].replace(/-/g, "-");
        this.info.end_date = e[e.length - 1].replace(/-/g, "-");
        this.show = false
      },
      getDate() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
        const day = currentDate.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        this.info.start_date = formattedDate
        this.info.end_date = formattedDate
      },
      async getUserProgress() {
        const {
          data: res
        } = await uni.$http.post('school/feedback/getUserProgress', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.list = res.data
      }
    }
  }
</script>

<style lang="scss">
  .content {
    padding-top: 20rpx;

    .searchBox {
      width: 670rpx;
      margin: 0 auto;
      padding: 0 20rpx;

      .timeBox {
        display: flex;
        height: 78rpx;
        line-height: 78rpx;
        align-items: center;
        margin-bottom: 18rpx;
        font-size: 21rpx;

        .time {
          width: 250rpx;
          height: 78rpx;
          border-radius: 10rpx;
          background: #FFFFFF;
          border: 2rpx solid #FCF7F7;
          padding-left: 26rpx;
          color: #666;

          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;
            vertical-align: middle;
          }
        }
      }

      .iptBox {
        display: flex;

        .ipt {
          box-sizing: border-box;
          width: 378rpx;
          height: 66rpx;
          padding-left: 75rpx;
          border: 2rpx solid #FCF7F7;
          border-radius: 10rpx;
          margin-right: auto;
        }

        .iptPla {
          color: #999;
          font-size: 24rpx;
        }

        .searchBtn {
          display: inline-block;
          background: #A6A6A6;
          width: 100rpx;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
        }
      }
    }

    .list {
      width: 673rpx;
      margin: 40rpx auto;

      .item {
        margin-bottom: 20rpx;
        font-size: 21rpx;

        .header {
          width: 673rpx;
          height: 54.32rpx;
          opacity: 1;
          border-radius: 8.76rpx;
          background: linear-gradient(90deg, rgba(121, 72, 234, 1) 0%, rgba(121, 72, 234, 0) 100%);
          color: #fff;
          padding-left: 40rpx;
          line-height: 54rpx;
        }

        .boxList {
          flex-wrap: wrap;

          .box {
            justify-content: center;
            flex-wrap: wrap;
            width: 144rpx;
            height: 95rpx;
            border-radius: 9rpx;
            background: linear-gradient(90deg, #1AADA4 0%, #08CFC1 100%);
            text-align: center;
            margin-right: 20rpx;
            margin-top: 20rpx;

            view {
              width: 100%;
            }
          }
        }

        .box:first-child {
          background: #ececec;

          >view {
            color: #666;
          }
        }

        .box:nth-child(3n + 1) {
          background: #ececec;

          >view {
            color: #666;
          }
        }
      }
    }
  }
</style>